<template>

<div class="switch-image">
  <div class="show-img">
    <div class="inner">
      <el-carousel ref="carousel" style="height: 100%" height="100%" 
        :autoplay="false" :initial-index="1" indicator-position="none"
        @change="carouselChange"
      >
        <el-carousel-item  v-for="(item, index) in imgList" :key="index" :name="item.label">
          <xdh-async-img class="item" :id="item.id"></xdh-async-img>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <div class="case-imgs">
    <div :class="{'img': true, 'active': index===currentIndex}" v-for="(item, index) in imgList" :key="index" @click="switchItem(item, index)">
      <xdh-async-img class="inner" :id="item.id"></xdh-async-img>
    </div>
     
  </div>
</div>

</template>

<style lang="scss" scoped>
@import "../../../style/_vars.scss";
.switch-image{
  display:flex;
  width: 100%;
  height: 100%;
  flex-flow: column;
  padding-top: 5px;
  .show-img{
    flex: 1;
    width: 100%;
    .inner{
      height: 100%;
      border: 1px solid $--border-color-base;
      .item{
        width: 100%; 
        height: 100%;
      }
    }
    
  }
  .case-imgs{
    flex: 0 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px 0;
    .img{
      flex: 0 0 19.5%;
      background: $--border-color-base;
      .inner{
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
      } 
    }
    .img.active{
      border: 1px solid skyblue;
    }
  }
}

</style>

<script>
import XdhAsyncImg from '@/components/common/xdh-async-img'
const LIST = [
  {label: '1', id: '00000a'},
  {label: '2', id: '00000b'},
  {label: '3', id: '00000c'},
  {label: '4', id: '00000d'},
  {label: '5', id: '00000e'}
]
export default {
  name: 'detectivePush',
  components: {
    XdhAsyncImg
  },
  props: {
  },
  data() {
    return {
      imgList: LIST,
      currentIndex: 0
    }
  },
  computed: {
    // currentItem() {}
  },
  watch: {
    
  },
  methods: {
    switchItem(item, index) {
      
      this.$refs.carousel.setActiveItem(index)
    },
    carouselChange(index) {
      this.currentIndex = index
      // console.log('carouselChange', index)
    }
  },
  mounted() {
  }
}
</script>

